<template>
  <div class="situationManage">
    <el-dialog title="情形包管理" :visible.sync="showDialog" width="70%" style="min-height: 500px">
      <div class="content">
        <div class="itemBox" v-for="item in dataList" :key="item.situationPackageId">
          <div class="itemContent">
            <situationConfig :dataList="item.objects" :situationPackageId="item.situationPackageId"  />
          </div>
        </div>
        <div class="itemBox">
          <a href="javascript:;" class="initBtn" style="font-size:30px;color:#67c23a;">
            <i class="el-icon-circle-plus" @click="openChoiceList()"></i>
          </a>
        </div>
      </div>
    </el-dialog>
    <situationList ref="situationList" @success="getSituationData" />
  </div>
</template>

<script>
import { getSituationList } from '@/api/itemManage';
import situationConfig from './situationConfig';
import situationList from './situationList';
export default {
  props: {},
  components: {
    situationConfig,
    situationList
  },
  watch: {},
  data() {
    return {
      eventId: '',
      showDialog: false,
      dataList: []
    };
  },
  methods: {
    getSituationData(eventId) {
      if (eventId) {
        this.eventId = eventId;
      }
      getSituationList(this.eventId).then((res) => {
        let data = res.data.result;
        this.dataList = data ? data : [];
      });
    },
    openChoiceList(data) {
      if(data){
        this.$refs.situationList.situationItemId = data.situationItemId;
        this.$refs.situationList.situationPackageId = data.situationPackageId;
      }else{
        this.$refs.situationList.situationItemId = '';
        this.$refs.situationList.situationPackageId = '';
      }
      this.$refs.situationList.showDialog = true;
      this.$refs.situationList.eventId = this.eventId;
      this.$refs.situationList.initPage();
    }
  },
  mounted() {
    eventBus.$on('addItem',(data)=>{
      console.log(data);
      this.openChoiceList(data);
    })
    eventBus.$on('success',()=>{
      this.getSituationData();
    })
  }
};
</script>

<style scoped lang="scss">
.initBtn {
  font-size: 30px;
  color: #67c23a;
  height: 40px;
  vertical-align: top;
  margin-top: -6px;
  margin-right: 10px;
}
.situationManage {
  .content {
    .itemBox {
      display: flex;

      .itemContent {
        flex: 1;
        .situationBox {
          display: flex;
          .ques {
            height: 30px;
            line-height: 30px;
            display: inline-block;
            padding: 0 10px;
            border: 1px solid #67c23a !important;
            background: #67c23a !important;
            color: #fff;
            border-radius: 8px;
            margin-right: 10px;
          }
          .situationConfig {
            flex: 1;
            li {
              display: flex;
              margin-bottom: 10px;
              span {
                height: 30px;
                line-height: 30px;
                display: inline-block;
                padding: 0 10px;
                border: 1px solid #e6a23c;
                background: #e6a23c;
                color: #fff;
                border-radius: 8px;
                margin-right: 10px;
              }
              i {
                height: 20px;
                color: #f56c6c;
                font-size: 20px;
                margin-top: 6px;
                margin-right: 10px;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}
</style>
